<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js" ></script>
</head>
<body>
<div id="app">
    <counter-a content="Hello Vue"></counter-a>
    <counter-a content="Hello World"></counter-a>
</div>
<script>
    //绑定一个总线 或者使用 Vuex
    Vue.prototype.bus = new Vue()

    const MyComponet={
        data:function () {
            return {
                selfContent:this.content
            }
        },
        props:[
            'content'
        ],
        template:`
            <div>
                <div @click="handleClick" >{{selfContent}}</div>
            </div>
        `,
        methods:{
            handleClick:function () {

                //在总线上触发一个事件
                this.bus.$emit('change',this.selfContent)

            }
        },
        mounted:function () {
            //在挂载回调中，总线上监听change事件
           let _this = this

           this.bus.$on('change',function (msg) {
               _this.selfContent = msg;
           })

        }
    }


    const  vm = new Vue(
        {
            el:"#app",

            components:{
                'counterA':MyComponet
            }

        }
    )

</script>


</body>
</html>